<template>
	<view class="item">
		<view class="question-wrapper">
			<text class="index">{{index+1+". "}}</text>
			<text class="question">{{item.title}}</text>
		</view>

		<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
			<u-checkbox shape="circle" :size="'1rem'" @change="checkboxChange" v-model="it.checked"
				v-for="(it, ci) in options" :key="ci">
				<text class="empty"></text>
				<text class="desc">{{`${letters[ci]}. ${it.title}`}}</text>


				<u-icon v-if="it.isRight && showResult" class="mark" name="checkmark" color="#339933" size="35"></u-icon>
				<u-icon v-if="!it.isRight && showResult" class="mark" name="close" color="#cc3300" size="35"></u-icon>

			</u-checkbox>
		</u-checkbox-group>

	</view>
</template>

<script>
	import _ from "lodash-es"

	export default {
		name: "exam-item",
		props: ["index", "item", "showResult"],
		emits: ["checkChange"],

		data() {
			return {
				letters: "ABCDEFGHIJKLMNOP",
				answers: [],
				checks: [],
				bomb: false,
				options: [{
						title: '选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本',
						checked: false,
						disabled: false
					},
					{
						title: '选项文本选项文本选项文本选项文本选项文本选项文本',
						checked: false,
						disabled: false
					},
					{
						title: '选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本',
						checked: false,
						disabled: false
					},
					{
						title: '选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本',
						checked: false,
						disabled: false
					},
					{
						title: '选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本选项文本',
						checked: false,
						disabled: false
					}
				]
			};
		},

		computed: {
			totalTrues() {
				return this.answers.reduce(
					(pv, cv) => cv ? pv + 1 : pv, 0
				)
			},

			score() {
				let bingos = 0
				this.checks = this.options.map(op => op.checked)

				for (var i = 0; i < this.checks.length; i++) {
					if (!this.answers[i] && this.checks[i]) {
						this.bomb = true
						return 0
					}

					if (this.answers[i] && this.checks[i]) {
						bingos++
					}
				}

				console.log(bingos, "/", this.totalTrues);

				switch (true) {
					case bingos === this.totalTrues:
						return 1;
					case bingos && bingos < this.totalTrues:
						return 0.5;
					default:
						return 0;
				}
			}
		},
		mounted() {

			/* 1.0 */
			// this.options = this.item.ros.concat(this.item.wos).map(
			// 	item => ({
			// 		...item,
			// 		checked: false,
			// 		disabled: false
			// 	})
			// )

			/* 把答案洗牌 */
			while (this.answers.length === 0) {
				this.item.ros.forEach(op => op.isRight = true)

				this.options = _.shuffle(this.item.ros.concat(this.item.wos)).slice(0, 5).map(
					item => ({
						...item,
						checked: false,
						disabled: false
					})
				)

				this.answers = this.options.map(
					op => Boolean(this.item.ros.find(o => o.title === op.title))
				)
				console.log(this.item.title, "this.answers", this.answers);
			}

		},

		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.checks = this.options.map(op => op.checked)
				console.log("checkboxGroupChange checks=", this.checks);
				console.log("checkboxGroupChange answers=", this.answers);
				console.log("checkboxGroupChange score=", this.score);

				this.$emit("checkChange", this.index, this.score)
			},

		},

	}
</script>

<style lang="scss">
	.item {
		border-bottom: 1rpx solid #f0f0f0;
		padding: 30rpx 20rpx 30rpx 20rpx;

		.question-wrapper {
			margin-bottom: 20rpx;
			line-height: 1.5rem;

			.question,
			.index {
				font-size: 1.05rem;
				color: #333;
			}
		}

		u-checkbox-group {
			// display: flex;
			// flex-direction: column;
			font-style: italic;

			u-checkbox {
				display: block;

				text.empty {
					display: inline-block;
					margin-right: 1.1rem;
				}

				.mark {
					margin-left: 10rpx;
				}
			}
		}

	}
</style>